<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>后台管理模板</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="../../css/global.css" media="all">
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
        <link rel="stylesheet" href="../../datatables/media/css/jquery.dataTables.css">
        <link rel="stylesheet" href="../../datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../../css/dateRange.css">
        <style type="text/css">
        .dataTables_empty {
            display: none
        }
        .select {
            top:72px;
        }
        .accuratebtn {
        position: absolute;
        font-size: 14px;
        top: 72px;
        left: 240px;
        z-index: 99;
        }
        .accurate {
        position: absolute;
        top: 72px;
        left: 350px;
        z-index: 99;
        display: none;
        }
        .handytime {
            float: left;
            margin-right: 25px;
        }
        #div_date_select {
        float: left;
        }
        table.dateRangeDateTable th:first-child, table.dateRangeDateTable td:first-child {
            width: inherit;
        }
        #timeselect {
            border-radius: 0;
            font-size: 14px;
            color: #555;
        }
        </style>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin" style="border-bottom: solid 5px #1aa094;">
            <!--头部导航-->
            <div class="layui-header header header-demo" ></div>
            <!--左侧导航-->
            <div class="layui-side layui-bg-black" id="admin-side">
            </div>
            <!--右侧具体内容-->
            <div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;padding:20px" id="admin-body">
                <div class="title">订单列表</div>
                <hr />
                <div class="select">
                <select lay-verify="" id="orderSequence">
                    <option value="">状态</option>
                    <option value="0">状态-等待代购人确定金额</option>
                    <option value="1">状态-确认但未支付</option>
                    <option value="2">状态-已支付</option>
                    <option value="3">状态-找快递员</option>
                    <option value="4">状态-待取件</option>
                    <option value="5">状态-派送中<span class="fa fa-long-arrow-down" aria-hidden="true"></span></option>
                    <option value="6">状态-完成</option>
                    <option value="7">状态-关闭</option>
                    <option value="8">状态-退款中</option>
                </select>
                 </div>
                 
                <button class="layui-btn layui-btn-primary layui-btn-small accuratebtn">精确搜索</button>
                <div class="accurate">
                    <div class="handytime">
                        <select name="timeselect" id="timeselect">
                            <option value="">默认</option>
                            <option value="1">一周内</option>
                            <option value="2">一月内</option>
                            <option value="3">三月内</option>
                            <option value="4">半年内</option>
                        </select>
                    </div>
                    <div class="ta_date" id="div_date_demo3">
                        <span class="date_title" id="date_demo3">2017-07-13 至 2017-07-19</span>
                        <a class="opt_sel" id="input_trigger_demo3" href="#">
                            <i class="i_orderd"></i>
                        </a>
                    </div>
                </div>

                <div class="layui-form">
                    <table class="layui-table" id="orderTable">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="" id="checkall" onchange="checkAll(this,'#orderTable')"></th>
                                <th>请求方</th>
                                <th>代购方</th>
                                <th>快递员</th>
                                <th>创建时间</th>
                                <th>完成时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="ordercheck" id="" ></td>
                                <td><img src="../../images/1.jpg"><span>adad</span></td>
                                <td><img src="../../images/0.jpg"><span>lzy</span></td>
                                <td><img src="../../images/xiaosong.jpg"><span>dsaf</span></td>
                                <td>2017-6-30</td>
                                <td>2017-6-30</td>
                                <td>使用中</td>
                                <td><div class="layui-btn  layui-btn-small order_detail">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose">关闭</div></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ordercheck" id="" ></td>
                                <td><img src="../../images/6.jpg"><span>adad</span></td>
                                <td><img src="../../images/find_1.png"><span>lzy</span></td>
                                <td><img src="../../images/0.jpg"><span>dsaf</span></td>
                                <td>2017-6-30</td>
                                <td>2017-6-30</td>
                                <td>使用中</td>
                                <td><div class="layui-btn  layui-btn-small order_detail">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose">关闭</div></td>
                            </tr>
                        </tbody>
                    </table>
                 <div class="layui-btn layui-btn-danger  layui-btn-small closeall" id="ordercloseall" >批量关闭</div>
                   
                </div>
            </div>
            <!--底部导航-->
            <div class="layui-footer footer footer-demo" id="admin-footer"></div>
            <!--JS模块-->
            <script type="text/javascript" src="../../layui/layui.js"></script>
            <script src="../../js/jquery-1.12.3.min.js"></script>
            <script src="../../js/index.js"></script>

            <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
            <script type="text/javascript" src="../../js/dateRange.js"></script>
            <!-- DataTables JavaScript -->
            <script src="../../datatables/media/js/jquery.dataTables.min.js"></script>
            <script>
            var data = {
                        "code": 200,
                        "orderStatisticalVos": [{
                            "orderId": "1234", //订单id
                            "headPortraitUrl": "../../images/am.jpg", //发单者
                            "nickname": "小白兔", //发单者
                            "purchaseUserheadPortraitUrl": "../../images/xiaosong.jpg", //代购者
                            "purchaseUserNickname": "矮大紧", //代购者
                            "courierheadPortraitUrl": "../../images/xiaosong.jpg" ,
                            "courierNickname": "zylin",
                            "demandCreatetime": "2017-7-17 16:05:58", //需求单创建时间
                            "arriveTime": "2017-7-17 16:05:58", //订单完成时间
                            "orderState": 1, //订单状态 0-接受 1-完成 2-取消
                        }, {
                            "orderId": "12345", //订单id
                            "headPortraitUrl": "../../images/dx.jpg", //发单者
                            "nickname": "小白兔", //发单者
                            "purchaseUserheadPortraitUrl": "../../images/fems.jpg", //代购者
                            "purchaseUserNickname": "矮大紧", //代购者
                            "courierheadPortraitUrl": "../../images/jn.jpg",
                            "courierNickname": "zylin",
                            "demandCreatetime": "2017-7-17 16:05:58", //需求单创建时间
                            "arriveTime": "2017-7-17 16:05:58", //订单完成时间
                            "orderState": 0, //订单状态 0-接受 1-完成 2-取消
                        }, {
                            "orderId": "12346", //订单id
                            "headPortraitUrl": "../../images/mm.jpg", //发单者
                            "nickname": "小白兔", //发单者
                            "purchaseUserheadPortraitUrl": "../../images/am.jpg", //代购者
                            "purchaseUserNickname": "矮大紧", //代购者
                            "courierheadPortraitUrl": "../../images/0.jpg",
                            "courierNickname": "zylin",
                            "demandCreatetime": "2017-7-17 16:05:58", //需求单创建时间
                            "arriveTime": "2017-7-17 16:05:58", //订单完成时间
                            "orderState": 7, //订单状态 0-接受 1-完成 2-取消
                        }]
                    }
            $(function() {
                $("#order").addClass('layui-this'); //对应订单管理的背景色
                $('#orderTable').DataTable({
                    responsive: true,
                    ordering: false,
                    searching: true,
                    "bLengthChange": false,
                    "bRetrieve": true,
                    "bFilter": true, //过滤功能
                });
                adminCookie()
            })

            //精确搜索！！！！！！！
                $('.accuratebtn').on('click',function(){
                    if ($('.accurate').css('display')=='none') {
                        $('.accurate').css('display','block')
                    } else {
                        $('.accurate').css('display','none')
                    }
                })

                 var dateRange = new pickerDateRange('date_demo3', {
                isTodayValid: true,
                startDate: '2017-07-14',
                endDate: '2017-07-21',
                defaultText: ' 至 ',
                inputTrigger: 'input_trigger_demo3',
                theme: 'ta',
                success: function(obj) {
                    //自定义的回调函数 callback();
                }
            });


            function order_Detail(orderid){
                window.location.href = "orderdetail.html?orderId=" + orderid;
            }

            $(document).on('click', '.orderclose', function() {
                k = $(this).parents("tr").index() + 1;
                var element = this
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.confirm('是否要关闭选中订单', {
                        icon: 2,
                        title: '提示'
                    }, function(index) {
                        layer.confirm('关闭订单后不可恢复 是否仍关闭订单？', {
                            icon: 2,
                            title: '提示'
                        }, function(index) {
                            /* $.ajax({
                             type: "get",
                             url: "/randomdelivery/AdminController/closeOrderByOrderId/"+element.id,
                             data: {},
                             async: true,
                             dataType: "json",
                             contentType: "application/json",
                             success: function(data) {*/
                            if (data.code == 200) {
                                $("table#orderTable").find("tr:eq(" + k + ")").children('td:nth-child(7)').text("关闭").css('color', 'red');
                                $("input[type='checkbox']:checked").prop('checked', false)
                                layer.close(index);
                            }
                                    /*},
                             Error: function() {
                                 alert("服务器出错");
                             }
                         })*/
                        })
                    });

                });
            })


            $("#ordercloseall").click(function() {
                if ($("input[name='ordercheck']:checked").length == 0) {
                    layer.msg("请选择订单")
                } else {
                    layui.use('layer', function() {
                        var layer = layui.layer;
                        layer.confirm('是否要关闭选中订单？', {
                            icon: 2,
                            title: '提示'
                        }, function(index) {
                            layer.confirm('关闭订单后不可恢复 是否仍关闭订单？', {
                                icon: 2,
                                title: '提示'
                            }, function(index) {
                                $("input[name='ordercheck']:checked").each(function() {
                                    /* $.ajax({
                                     type: "get",
                                     url: "/randomdelivery/AdminController/closeOrderByOrderId/"+this.id,
                                     data: {},
                                     async: true,
                                     dataType: "json",
                                     contentType: "application/json",
                                     success: function(data) {*/
                                            if (data.code == 200) {
                                                $(this).parents("tr").children('td:nth-child(7)').text("关闭").css('color', 'red')
                                                $("input[type='checkbox']:checked").prop('checked', false)
                                            }
                                                /*},
                                         Error: function() {
                                             alert("服务器出错");
                                         }
                                     })*/
                                    layer.close(index);
                                });
                            });
                        });
                    });
                }
            });

            $(document).on('click', 'tr td:not(:first)', function() {
                if ($(this).siblings().first().children().is(':checked') == false) {
                    $(this).siblings().first().children().prop("checked", true);
                } else {
                    $(this).siblings().first().children().prop("checked", false);
                }
            })

           

            $("#orderSequence").bind("change", function() {
                orderSelectChange($(this).val())
                alert(213)
            })

            function orderSelectChange(v) {
                /* $.ajax({
                     type: "get",
                     url: "/randomdelivery/AdminController/orders/pageCount/1/pageSize/10",
                     data: {
                         "sequence": v,
                     },
                     async: true,
                     dataType: "json",
                     contentType: "application/json",
                     success: function(data) {
    
                     },
                     Error: function() {
                         alert("服务器出错");
                     }
                 })*/
                orderdata(data);
            }

            function orderdata(data) {
                $('#orderTable').dataTable().fnClearTable(); //清除表格内
                $.each(data.orderStatisticalVos, function(index, item) {
                    var state;
                    var demandCreatetime = new Date(item.demandCreatetime).Format("yyyy-MM-dd hh:mm:ss")
                    var arriveTime = new Date(item.arriveTime).Format("yyyy-MM-dd hh:mm:ss")
                    k = index + 1
                    if (item.orderState == 0) {
                        state = "等待代购人确定金额"
                    }
                    if (item.orderState == 1) {
                        state = "确认但未支付"
                    }
                    if (item.orderState == 2) {
                        state = "已支付"
                    }
                    if (item.orderState == 3) {
                        state = "找快递员"
                    }
                    if (item.orderState == 4) {
                        state = "待取件"
                    }
                    if (item.orderState == 5) {
                        state = "派送中"
                    }
                    if (item.orderState == 6) {
                        state = "完成"
                    }
                    if (item.orderState == 7) {
                        state = "关闭"
                    }
                    if (item.orderState == 8) {
                        state = "退款中"
                    }
                    $('#orderTable').dataTable().fnAddData([
                        '<input type="checkbox" name="ordercheck" id='+item.orderId+' >',
                        '<img src="' + item.headPortraitUrl + '"><span>' + item.nickname + '</span>',
                        '<img src="' + item.purchaseUserheadPortraitUrl + '"><span>' + item.purchaseUserNickname + '</span>',
                        '<img src="' + item.courierheadPortraitUrl + '"><span>' + item.courierNickname + '</span>',
                        item.demandCreatetime,
                        item.arriveTime,
                        state,
                        '<div class="layui-btn  layui-btn-small order_detail" onclick="order_Detail('+item.orderId+')">详情</div><div class="layui-btn layui-btn-danger  layui-btn-small orderclose" id='+item.orderId+'>关闭</div>',
                        ])
                    if (item.orderState == 7) {
                                    $("table#orderTable").find("tr:eq(" + k + ")").children('td:nth-child(8)').children('.orderclose').attr('class', 'layui-btn layui-btn-disabled  layui-btn-small')
                                    $("table#orderTable").find("tr:eq(" + k + ")").children('td:nth-child(7)').text("关闭").css('color', 'red');
                                }
                })
            }

            </script>
            
        </div>
    </body>
</html>